<!-- 模板 -->
<template>
    <div class="pop" v-show="show" :class="{'pop--drop': dropDown}">
        <transition :name="maskerTransition">
            <div class="pop__masker" v-show="isComponentShow" @click='onHide'></div>
        </transition>
        <div class="pop__inner">
            <transition :name="dialogTransition" v-on:after-leave="afterLeave">
                <div class="pop__inner__dialog" v-show='isComponentShow'>
                    <h1>选择您的活动城市</h1>
                    <ul>
                         <li class="pop__inner__city" v-for="item in list">
                            <a href="javascript:;" class="pop__inner__city__btn" :class="{' pop__inner__city__btn--active': item.cityCode == currentCityInfo.cityCode}" @click="changeCity(item)">{{ item.cityName }}</a>
                        </li>
                    </ul>

                    <a href="javascript:;" @click='onHide' class="pop-close"></a>
                </div>
            </transition>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import _ from 'lodash/collection/';
    import wx from 'we-jssdk';
    import { DB } from '../../config/db';
    import wxEvent from '../../filter/wxconfig.js';
   

    export default{
       data(){
            return{
                show: !1,
                dropDown: !1, //动画掉落
                isComponentShow: !1,
                maskerTransition: "aui-pop-masker",
                dialogTransition: "aui-pop"
            }
        },
        props: {
            isShow: {
                type: Boolean,
                default: !1
            },
            list: {
                type: Array,
                default(){
                    // 测试数据
                    return []
                }
            }
        },
        computed:{
            currentCityInfo(){
                return this.$store.state.currentCityInfo;
            }
        },
        watch: {
            isShow(){
                if(!this.isShow){
                    return;
                }
                this.show = 1;

                setTimeout(() => {
                    this.isComponentShow = !0;
                    setTimeout(() => {
                        this.dropDown = !0;
                    }, 400);
                }, 10);
            }
        },
        methods: {
            onHide() {
                this.isComponentShow = !1;
            },
            // 点击确认按钮之后，可能会存在回调事件
            afterLeave(){
                this.show = !1;
                // 回调
                this.$emit('on-cb');
            },
            // 选择城市
            changeCity(item){
                // 判断缓存中的当前城市 是否有活动
                let currentActivity = _.find(this.$store.state.activityList, {'cityCode': item.cityCode});

                if(currentActivity && currentActivity.current){
                    localStorage["hcxsq_current_city_info"] = JSON.stringify(item);

                    this.$store.commit('setCurrentActivityInfo', currentActivity);

                    this.$store.commit('setCurrentCityInfo', item);

                    wxEvent.wxShareSetting(this);

                }else{
                    this.$aui.toast.show("当前城市没有活动，请选择其他城市");
                }

                this.onHide();
            }
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
@import "../../styles/common/config.scss";
.pop{
    @include absWin;
    z-index: 999;
    &--drop{
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        .pop__inner__city{
            transform: translate(0, 0);
            &:nth-child(1){
                animation: bounce .75s ease-out forwards;
            }
            &:nth-child(2){
                animation: bounce .75s ease-out forwards 0.25s;
            }
            &:nth-child(3){
                animation: bounce .75s ease-out forwards 0.5s;
            }
            &:nth-child(4){
                animation: bounce .75s ease-out forwards 0.75s;
            }
            &:nth-child(5){
                animation: bounce .75s ease-out forwards 1s;
            }
            &:nth-child(6){
                animation: bounce .75s ease-out forwards 1.25s;
            }
            &:nth-child(7){
                animation: bounce .75s ease-out forwards 1.5s;
            }
            &:nth-child(8){
                animation: bounce .75s ease-out forwards 1.75s;
            }
            &:nth-child(9){
                animation: bounce .75s ease-out forwards 2s;
            }
            &:nth-child(10){
                animation: bounce .75s ease-out forwards 2.25s;
            }
        }
    }
    @at-root &__inner{
        @include absWin;
        @include flexbox;
        @include flexCenterVeri;
        @include flexCenterHori;
        pointer-events: none;
        @at-root &__dialog{
            position: relative;
            overflow: hidden;
            width: 80%;
            max-width: 6.4rem;
            color: #fff;
            padding-bottom: 2.0rem;
            pointer-events: auto;
            >h1{
                width: 100%;
                font-size: 0.34rem;
                font-weight: bold;
                text-align:center;
                line-height: 1.2rem;
                position: relative;
                &:after{
                    content: "";
                    position: absolute;
                    width: 1.4rem;
                    height: 4px;
                    background-color: #4f555b;
                    border-radius: 2px;
                    bottom: 0;
                    left: 50%;
                    margin-left: -0.7rem;
                }
            }
            >ul{
                padding: 0.4rem 0;
                // @include flexbox;
                // @include flexWrap;
                width: 100%;
                overflow: hidden;
            }
        }
        @at-root &__city{
            width: 33.3333%;
            float: left;
            margin-bottom: 0.4rem;
            padding: 0 0.2rem;
            opacity: 0;
            transform: translate(0, -50px);
            &__btn{
                text-decoration: none;
                background-color: #ffffff;
                color: #8e8e8e;
                width: 100%;
                display: block;
                border-radius: 0.33rem;
                font-size: 0.32rem;
                text-align: center;
                line-height: 0.66rem;
                height: 0.66rem;
                letter-spacing: 1px;
                &:active{
                    background-color: #f9454b;
                    color: #fff;
                }
                &--active{
                    background-color: #f9454b;
                    color: #fff;
                }
            }
        } 
    }
    
    @at-root .pop-close{
        width: 0.6rem;
        height: 0.6rem;
        display: block;
        position: absolute;
        bottom: 0.1rem;
        left: 50%;
        margin-left: -0.3rem;
        background: url("../../assets/images/icon_close.png") 50% no-repeat;
        background-size: 0.6rem; 
        &:active{
            transform: scale(1.1);
        }
    }


    @at-root &__masker{
        @include absWin;
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    @keyframes aui-pop-enter-animation{
        0% {-webkit-transform: scale(1.4,1.4) translateY(-20px); opacity: 0;}
        100% {-webkit-transform: scale(1,1) translateY(0); opacity: 1;}
    }
    @keyframes aui-pop-makser-enter-animation{
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    @keyframes aui-pop-leave-animation{
        0% {-webkit-transform: scale(1, 1); opacity: 1;}
        100% {-webkit-transform: scale(0.95, 0.95); opacity: 0;}
    }
    @keyframes aui-pop-masker-leave-animation{
        0% { opacity: 1;}
        100% {opacity: 0;}
    }
    @at-root .aui-pop-enter-active{
        animation: aui-pop-enter-animation 0.4s cubic-bezier(0, 1.03, 0.07, 0.99) forwards;
    }
    
    @at-root .aui-pop-masker-enter-active{
        animation: aui-pop-makser-enter-animation 0.4s linear forwards;
    }
    
    @at-root .aui-pop-leave-active{
        animation: aui-pop-leave-animation 0.25s ease-in forwards;
    }
    
    @at-root .aui-pop-masker-leave-active{
        animation: aui-pop-masker-leave-animation  0.25s ease-in forwards;
    }

    @keyframes bounce {
        0%,100%,20%,53%,80% {
            -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
            animation-timing-function: cubic-bezier(0.215,.61,.355,1);
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }

        40%,43% {
            -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
            animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0)
        }

        70% {
            -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
            animation-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-10px,0);
            transform: translate3d(0,-10px,0)
        }

        90% {
            -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0)
        }
        100%{
            opacity: 1;
        }
    }
}
</style>
